<template>
    <div class="quiz" v-loading="loading">
        <div class="ans-header">
          <el-button icon="ArrowLeft" class="arrow-button" circle @click="goBack"></el-button>
          <div class="ans-title">
            <h3>{{ title }}</h3>
            <p>共8个题目</p>
          </div>
        </div>

        <div class="question-navigation">
            <button
                v-for="(num, index) in questionNumbers"
                :key="index"
                :class="{'active': idx === index, 'selected': question[index].option.some(option => option.checked)}"
                @click="idx = index"
            >
                {{ num }}
            </button>
        </div>

        <div v-for="(item, index) in question" v-show="index === idx" :key="item.id" class="question">
            <p class="question-title">{{ idx + 1 }}.<span v-if="item.ismultiple">（多选）</span><span v-else>（单选）</span>
              <v-md-preview :text="item.name"></v-md-preview>
            </p>
            <div v-for="val in item.option" :key="val.id" class="option" @click="handleClick(val)">
                <span :class="val.checked ? 'circle checked' : 'circle'">{{ val.letter }}</span>
                <span>{{ val.name }}</span>
            </div>
        </div>

        <div class="button-container">
            <div class="navigation-buttons">
                <button class="button" @click="back()" :disabled="idx === 0">上一题</button>
                <button class="button" @click="idx === question.length - 1 ? submit() : next()">
                    {{ idx === question.length - 1 ? '提交' : '下一题' }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import router from '@/router'

const loading = ref(false)

const title = ref('2.2 分治法的基本思想')
const idx = ref(0);
const question = ref([
    {
        id: 1,
        ismultiple: false,
        name: '二分搜索算法是利用（  ）实现的算法。',
        answer: ['A'],
        option: [
            { id: 1, name: '分治策略', checked: false, letter: 'A' },
            { id: 2, name: '动态规划法', checked: false, letter: 'B' },
            { id: 3, name: '贪心法', checked: false, letter: 'C' },
            { id: 4, name: '回溯法', checked: false, letter: 'D' }
        ],
    },
  {
    id: 2,
    ismultiple: false,
    name: '二分搜索算法是利用（  ）实现的算法。',
    answer: ['A'],
    option: [
      { id: 1, name: '分治策略', checked: false, letter: 'A' },
      { id: 2, name: '动态规划法', checked: false, letter: 'B' },
      { id: 3, name: '贪心法', checked: false, letter: 'C' },
      { id: 4, name: '回溯法', checked: false, letter: 'D' }
    ],
  },
  {
    id: 3,
    ismultiple: false,
    name: '二分搜索算法是利用（  ）实现的算法。',
    answer: ['A'],
    option: [
      { id: 1, name: '分治策略', checked: false, letter: 'A' },
      { id: 2, name: '动态规划法', checked: false, letter: 'B' },
      { id: 3, name: '贪心法', checked: false, letter: 'C' },
      { id: 4, name: '回溯法', checked: false, letter: 'D' }
    ],
  },
  {
    id: 4,
    ismultiple: false,
    name: '二分搜索算法是利用（  ）实现的算法。',
    answer: ['A'],
    option: [
      { id: 1, name: '分治策略', checked: false, letter: 'A' },
      { id: 2, name: '动态规划法', checked: false, letter: 'B' },
      { id: 3, name: '贪心法', checked: false, letter: 'C' },
      { id: 4, name: '回溯法', checked: false, letter: 'D' }
    ],
  },
  {
    id: 5,
    ismultiple: false,
    name: '二分搜索算法是利用（  ）实现的算法。',
    answer: ['A'],
    option: [
      { id: 1, name: '分治策略', checked: false, letter: 'A' },
      { id: 2, name: '动态规划法', checked: false, letter: 'B' },
      { id: 3, name: '贪心法', checked: false, letter: 'C' },
      { id: 4, name: '回溯法', checked: false, letter: 'D' }
    ],
  },
  {
    id: 6,
    ismultiple: false,
    name: '二分搜索算法是利用（  ）实现的算法。',
    answer: ['A'],
    option: [
      { id: 1, name: '分治策略', checked: false, letter: 'A' },
      { id: 2, name: '动态规划法', checked: false, letter: 'B' },
      { id: 3, name: '贪心法', checked: false, letter: 'C' },
      { id: 4, name: '回溯法', checked: false, letter: 'D' }
    ],
  },
    {
        id: 7,
        ismultiple: false,
        name: '衡量一个算法好坏的标准是（ ）。',
        answer: ['C'],
        option: [
          { id: 1, name: '长度', checked: false, letter: 'A' },
          { id: 2, name: '时间复杂度', checked: false, letter: 'B' },
          { id: 3, name: '编写时间', checked: false, letter: 'C' },
          { id: 4, name: '代码简洁度', checked: false, letter: 'D' }
        ],
    },
    {
        id: 8,
        ismultiple: false,
        name: '下面代码段的时间复杂度是（ ）。\n' +
          '\n' +
          'for( i=1; i<2n; i++ )\n' +
          '    for ( j=1; j<=n; j++ )\n' +
          '        x++;',
        answer: ['B'],
        option: [
            { id: 1, name: 'O(2n)', checked: false, letter: 'A' },
            { id: 2, name: 'O(n^2)', checked: false, letter: 'B' },
            { id: 3, name: 'O(2n^2)', checked: false, letter: 'C' },
            { id: 4, name: 'O(2^n)', checked: false, letter: 'D' },
        ],
    },
]);

const questionNumbers = question.value.map((_, i) => i + 1);

const next = () => {
    if (idx.value < question.value.length - 1) {
        idx.value++;
    }
};

const back = () => {
    if (idx.value > 0) {
        idx.value--;
    }
};

onMounted(async () =>  {
  await axios.get('/student/sc/myQuestion')
    .then(res => {
      console.log(res.data)
    })
})

const handleClick = (info) => {
    let currentQuestion = question.value[idx.value];
    let option = currentQuestion.option;

    option.forEach(item => {
        if (item.id === info.id) {
            item.checked = !item.checked;
        } else if (!currentQuestion.ismultiple) {
            item.checked = false;
        }
    });
};

const submit =  () => {
  loading.value = true
    setTimeout(function () {
      router.push('/analysis')
    }, 10 * 1000);
};

const goBack = () => {
    window.history.back();
};
</script>

<style scoped>
.quiz {
  width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    max-width: 100%;
    margin: 0 auto;
}

.ans-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.ans-title {
  display: flex;
  flex-direction: column;
}

.ans-title h3 {
  margin: 0;
  font-size: 23px;
  font-weight: bold;
  color: #333;
}

.ans-title p {
  margin: 0;
  font-size: 14px;
  color: #999;
}

.back-button .el-icon {
  font-size: 20px;
}

.title-container {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.question-navigation {
    display: flex;
    gap: 5%;
    margin: 4% 0 4% 3%;
  overflow-x: scroll;
}

.question-navigation button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background-color: lightgray;
    cursor: pointer;
    font-size: 18px;
}

.question-navigation .active {
    background-color: #077EF7;
    color: white;
}

.question-navigation .selected {
    background-color: #077EF7;
}

.question {
    width: 100%;
    padding: 2% 4%;
}

.question-title {
  font-size: 19px;
    text-align: left;
    margin: 2%;
}

.option {
  font-size: 19px;
    display: flex;
    align-items: center;
    margin: 5% 0;
    cursor: pointer;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid gray;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.checked {
    background-color: #409eff;
}

.button-container {
  width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 80%;
  margin-bottom: 8%;
}

.button {
  width: 40%;
  height: 100%;
    background-color: #077EF7;
    color: rgb(255, 255, 255);
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 10px;
}

.view-answers-button {
    background-color: white;
    border: none;
    margin-bottom: 10px;
    color: #CACBCE;
}
</style>
